<template>
  <div class="game" @click="handleClick">
    <h1>Flappy Bird</h1>
    <!-- 添加游戏开始按钮 -->
    <button v-if="!isGameStarted || isGameOver" @click="startGame">开始游戏</button>
    <div class="bird" :style="{ top: birdPosition + 'px' }"></div>
    <div v-if="isGameOver" class="game-over">Game Over</div>
    <!-- 添加柱子 -->
    <div v-for="(pipe, index) in pipes" :key="index">
      <!-- 顶部柱子 -->
      <div class="pipe top-pipe" :style="{ left: pipe.x + 'px', height: pipe.topHeight + 'px' }"></div>
      <!-- 底部柱子 -->
      <div class="pipe bottom-pipe" :style="{ left: pipe.x + 'px', height: pipe.bottomHeight + 'px' }"></div>
    </div>
    <!-- 添加分数显示 -->
    <div class="score">{{ score }}</div>
  </div>
</template>

<script>
export default {
  name: 'Game',
  data() {
    return {
      birdPosition: 150,
      gravity: 0.5,
      velocity: 0,
      lift: -10,
      isGameOver: false,
      isGameStarted: false, // 添加游戏开始标志
      pipes: [], // 添加柱子数组
      pipeInterval: null, // 添加柱子生成定时器
      score: 0 // 添加分数
    };
  },
  methods: {
    applyGravity() {
      if (this.isGameStarted) { // 只有在游戏已经开始时才应用重力
        this.velocity += this.gravity;
        this.birdPosition += this.velocity;

        if (this.birdPosition > 400) {
          this.isGameOver = true;
          clearInterval(this.gravityInterval);
          clearInterval(this.pipeInterval);
        }

        // 检查小鸟是否通过柱子
        this.pipes.forEach(pipe => {
          // 检查小鸟是否与顶部柱子发生碰撞
          if (this.birdPosition < pipe.topHeight && this.birdPosition + 30 > pipe.topHeight &&
              this.birdPosition + 15 > pipe.x && this.birdPosition + 15 < pipe.x + 50) {
            this.isGameOver = true;
            clearInterval(this.gravityInterval);
            clearInterval(this.pipeInterval);
          }

          // 检查小鸟是否与底部柱子发生碰撞
          if (this.birdPosition + 30 > 400 - pipe.bottomHeight && this.birdPosition < 400 - pipe.bottomHeight &&
              this.birdPosition + 15 > pipe.x && this.birdPosition + 15 < pipe.x + 50) {
            this.isGameOver = true;
            clearInterval(this.gravityInterval);
            clearInterval(this.pipeInterval);
          }

          if (pipe.x + 50 < this.birdPosition && pipe.x + 50 > this.birdPosition - 5) {
            this.score++;
          }
        });
      }
    },
    handleClick() {
      if (this.isGameStarted && !this.isGameOver) { // 只有在游戏已经开始且未结束时才允许点击
        this.velocity = this.lift;
      }
    },
    startGame() {
      this.isGameStarted = true; // 设置游戏开始标志
      this.isGameOver = false; // 重置游戏结束标志
      this.birdPosition = 150; // 重置小鸟位置
      this.velocity = 0; // 重置小鸟速度
      this.score = 0; // 重置分数
      this.pipes = []; // 清空柱子数组
      this.gravityInterval = setInterval(this.applyGravity, 20);
      this.pipeInterval = setInterval(this.generatePipe, 2000); // 生成柱子的定时器
    },
    generatePipe() {
      const gap = 100; // 空隙高度
      const minHeight = 50; // 柱子最小高度
      const maxHeight = 300 - gap - minHeight; // 柱子最大高度
      const topHeight = Math.floor(Math.random() * maxHeight) + minHeight; // 随机生成顶部柱子高度
      const bottomHeight = 400 - topHeight - gap; // 计算底部柱子高度
      this.pipes.push({ x: 300, topHeight: topHeight, bottomHeight: bottomHeight });
    },
    updatePipes() {
      this.pipes.forEach(pipe => {
        pipe.x -= 5; // 柱子向左移动
      });
      this.pipes = this.pipes.filter(pipe => pipe.x > -50); // 销毁移出屏幕的柱子
    }
  },
  mounted() {
  },
  beforeDestroy() {
    clearInterval(this.gravityInterval);
    clearInterval(this.pipeInterval);
  },
  watch: {
    isGameStarted(newValue) {
      if (newValue) {
        this.pipeInterval = setInterval(this.updatePipes, 20); // 开始更新柱子位置
      } else {
        clearInterval(this.pipeInterval);
      }
    }
  }
};
</script>

<style scoped>
.game {
  /* 游戏样式 */
  position: relative;
  height: 400px;
  width: 300px;
  border: 1px solid #000;
  overflow: hidden;
}

.bird {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: yellow;
  border-radius: 50%;
}

.game-over {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: red;
}

.pipe {
  position: absolute;
  width: 50px;
  background-color: green;
}

.top-pipe {
  top: 0;
}

.bottom-pipe {
  bottom: 0;
}

.score {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 20px;
  color: black;
}
</style>